En la entrada anterior vimos la forma de añadir un efecto esquina doblada con CSS, me preguntaba Enrique si había forma de aplicar ese mismo efecto como fondo de los post y el resultado es una forma original de mostrar nuestras entradas.
En plantilla edición de HTML podemos encontrar algo así:

.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;
}

Es el sitio indicado para añadir una imagen de fondo o color en los post y en este caso el efecto de esquina doblada, tendremos que eliminar lo anterior y en su lugar añadimos:
.post {
background:#ccc;/* color del post */
color: #333; /* color del texto */
margin: 2em auto;
overflow: hidden;
padding: 1em 1.5em;
position: relative;
width: 580px; /* ancho del post*/
}
.post:before {
content:"";
position:absolute;
top:0;
right:0;
border-width:0 40px 40px 0;
border-style:solid;
border-color:#fff #fff #333 #000;/* color borde y pestaña */
background:658E15;
/* sombra pestaña opcional*/
-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);
-moz-box-shadow:0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);
box-shadow:0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);
}

En vista previa ya podemos ver el resultado, si deseamos usar nuestros propios colores sólo debemos sustituirlos, para facilitar la tarea en el mismo código está indicado el lugar para hacerlo.
enrique

Gracias, Gem@!...:P

Responder
Anónimo

Funciona con wordpress o sólo blogger? bueno también tengo blogs en blogger en todo caso gracias

Responder
Gem@

:: Todo tuyo Enrique :D

:: www.desatrancos.eu todo lo que hay en este blog es aplicable a Blogger, puede ser que encuentres cosas que se pueden añadir también a Wordpress pero los pasos a seguir son única y exclusivamente para Blogger ;)

Responder
Andrea Mestre

Holaa! mira esque llevo como media hora buscando entre tus tutoriales (de gran ayuda por cierto) como poner esa cuadricula que tienes a la parte derecha, esa que tiene la imagen de twitter, de vagabundia, i que más abajo tambien la tienes con el titulo de: de interés. Pues me estoy volviendo loca buscando como puedo poner eso. Si me contestaras de verdad me serías de gran ayuda!! Cuando tengas un momento contesta porfavor :)

Responder
Ana Laura

Mmmmm, me gustó para las citas. Si uso ese código en el blockquote, ¿funcionará?

Muchas gracias por la idea :)

Responder
Ana Laura

Probé y anduvo perfectamente!

Ahora, mi blog tiene un fondo de color, y se ve el cuadradito blanco donde está la esquina dobladita. ¿Habrá alguna manera de solucionarlo y ponerlo transparente? Yo hice varios cambios pero no pude con eso.

Un saludo grande y muchas gracias!

Responder
enrique

Otra consulta, Gem@: cómo se implementa ese "reply" que tienes en cada comentario?
Gracias!

Responder
Ana Laura

Bueno, soy yo otra vez. Logré solucionar aceptablemente lo del triangulito blanco. Cambié los colores al más similar que encontré al fondo de mi plantilla (que está basada en una scrib, así que no era un color sólido), pero quedó bastante bien. :D

Por tercera vez, muchas gracias!! Me encantan las cosas que ofreces.

Responder
Liz Hopps

Gemm@

HOLA :D :D :D

Ahora que tengo un poquito de tiempo, te importuaré con un par de preguntitas, sorry... :0

1.-¿porqué en Google crome no se ven las figuritas de ir arriba que si se aprecian en firefox?...me llama la atención porque he visto otros blog con ese truco en google crome, pero en mi blog no se ve, ¿me falta algún código?

2.- Esto hace tiempo que me molesta, pero no se como solucionarlo.Cuando uno ve una entrada sola o bien la primera de las 5 que publico en el blog, siempre aparece un espacio en blanco antes de la primera imagen, aunque ésta esté, en la edición del post, sin ningún espacio.¿Como puedo corregirlo?

3.- Hay alguna forma de sólo ver algunas de las actualizaciones de los blogs que sigo (por ejemplo sólo los de blogs de ayuda)y esconderlas detrás de un botón, que cuando se presione las despliegue ( ese truco me fascina, peor no se como emplearlo con un gadget)

Ojalá me las puedas responder...

Besitos y gracias por todo.

Sorry por ser tan preguntona :$

=)

Cariños

LIZ

Responder
Gem@

:: Andrea ese borde punteado que rodea las imágenes te refieres?
Dime dónde deseas añadirlo y según el sitio así te digo dónde añadirlo.
La clase de borde es:
border: 1px dashed #C0C0C0;

:: Lamento llegar tarde Ana Laura :S pero me alegra lo solucionaras.
Cada vez me gusta más el diseño de tu blog, por cierto yo también soy adicta a las fuentes :D

:: Enrique JMiur lo explica en esta entrada:
%% Agregar Reply a los comentarios ;)

:: Liz holaaa!! ¿cómo estás? espero que mejor :)
Verás sobre Google Chrome no tengo respuesta porque no lo uso pero sabes que es casi imposible visualizar igual en todos los navegadores.

Sobre el tema del espacio blanco ¿has probado a añadir las imágenes sin incluirlas en una tabla?
La puedes centrar con el mismo editor de entradas o incluso de esta forma: <center> código de la imagen</center>

Hay un efecto muy elegante para mostrar y ocultar contenido, es el efecto toggle y si usas Scriptaculous en lugar de jQuery puedes añadirlo:
%% Ver efecto toggle

No eres pregunto, quieres saber y eso está bien.
(me encantaron tus gaTitos)
Cariños Liz :D

Responder
enrique

mmmmm....
Si en el código se requiere el ID me temo que no funcione en un blog privado.
O me equivoco?
:(

Responder
Gem@

:: Pues me temo que estés en lo cierto pero la verdad no he probado :S

Responder
Liz Hopps

Gamm@

Estoy mejor de salud, al menos no tengo lupus solo estoy inmunodeprimida severamente.El menor de los males...:D

Intentaré lo que dices sobre la parte en blanco, pero ocurre en firefox y en explorer también.Siempre añado una imagen grande al comienzo, pues si pongo letras, se corren hacia un lado, dejando un espacio en blanco a la derecha (pasa en los post antiguos como este http://harshies.blogspot.com/2006/12/ballare-o-como-salir-de-la-desventura.html )o si empiezo con letras simplemente se corren hacia abajo como http://harshies.blogspot.com/2007/01/prueba-para-gemma.html

Me ha gustado mucho el efecto de aparecer y desparecer, es muy elegante :P

¿Como se pone la Flechita de Reply? y he visto en muchos blogs que abajo de los post hay 5 botones para mail, blogger, twitter, facebook y uno ms que no conosco.Yo lo acepte en la platilla pero no aparece.¿Hay forma de ponerlo manuelamente?

¿Por ultimo, como puedo poner un fondo diferente en una entrada, por ejemplo que tenga gatitos para las entradas de animales?

Gracias por tu ayuda...muchas gracias

A lot of cute kisses )(mis gatitos mandan miaus)

:) :) :)

Responder
Ana Laura

Gema, gracias, es todo un honor que te guste mi blog, gran parte de lo que he logrado allí se debe a tu blog y a los de algunos otros tan generosos con su conocimiento como tú.

:D

Responder
Gem@

:: Es mucha modestia de tu parte Ana Laura sigo pensando que el buen gusto que tienes para el diseño y la forma tan peculiar de expresarte y hacerte llegar son méritos sólo tuyos.
Un trucquito aquí y otro allá no dan la esencia al blog que aporta el propio autor ;)

Responder
RamonRaw

Oye gemma, necesito ayuda, ramonraw@hotmail.com
porfa, eh buscando esto y no lo eh encontrado alomejor me puedes ayudar, ojala gema:D Saludos!

Responder
Gem@

:: RamonRaw ¿que has buscado qué cosa?

Responder
RamonRaw

Esta mi url y me sale el logo de blogger, y a usted le sale su logo, y quiero cambiarlo, me entiende? Desde hace meses quiero cambiarlo:(

Responder
Gem@

:: Te entiendo Ramon, eso qu eves es un favicon, puedes ver la forma de añadirlo en la siguiente entrada:

http://gemablog-.blogspot.com/2007/02/favicn-para-blogger-beta.html

Responder
RamonRaw

Oye, muchisimas gracias gema:D deveras que esta si es un verdadera web :D Te lo agradesco encerio, mis mas sincerios agradecimientos!

Tienes codigo de enlaze, te enlazare en mi blog:D

Responder
Gem@

:: Gracias a ti Ramon :) En la sidebar hay un código para enlazar el blog en "Botones »Widgets" ;)

Responder
Anónimo

gracias me ha servido de maravilla

Responder
Gem@

:: Me alegra mucho mark :)

Responder
Gem@

:: mark estuve mirando tu blog y si añades el color de fondo del blog se verá mejor ese efcto esquina doblada, por ejemplo si buscas lo siguiente

.post:before {
border-color: #FFFFFF #FFFFFF #333333 #000000;

y cambias esa segunda línea así:
border-color: #F3F3F3 #F3F3F3 #333333 #000000;

Responder
Allan Fixnet Uster

MUITOOO OBRIGADA AMIGA LINDAAA!
Conseguiiii!!!
Seu logo esta em meus blogs e em breve em minha page FACEBOOK!

Muitooo Obrigada!

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top